<template>
    <info-card class="card content center-info">
        <div class="title" slot="title">
            个人信息
            <el-button type="text" v-if="step == 0" @click="edit">个人信息修改</el-button>
        </div>

        <div class="center-info-main">
            <div class="detail" v-if="step == 0">
                <info-form :readonly="true"></info-form>
            </div>
            <div class="form" v-if="step == 1">
                <info-form @back="back"></info-form>
            </div>
        </div>

        <isLogin ref="myIsLogin"></isLogin>
    </info-card>
</template>

<script>
import InfoCard from '../components/info-card.vue';
import InfoForm from './components/form.vue';
import isLogin from '../components/isLogin.vue'
import { mapGetters } from 'vuex';

export default {
    layout: 'client-user',
    components: {
        InfoCard,
        InfoForm,
        isLogin,
    },
    data() {
        return {
            step: 0
        }
    },
    computed: {
        ...mapGetters({
            nickname: 'userinfo/getNickname',
        }),
    },
    methods: {
        edit() {
            if(this.nickname){
                this.step = 1
            }
        },
        back(){
            this.step = 0
        }
    },
}
</script>

<style lang="scss" scoped>
@import '@css/var.scss';   
.center-info{
    .title {
        font-weight: 600;
        width: 200px;
        display: flex;
        justify-content: space-between;

        .el-button {
            padding: 0;
        }
    }

    .center-info-main{
        margin-top: 20px;
    }
}

</style>